@import 'tailwindcss';
@plugin "@midudev/tailwind-animations";

@theme {
  --color-dark-magenta: #2a1f26;
  --font-fallback:
    'Adjusted Arial Fallback', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI',
    'Noto Sans', helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --font-primary: 'Anisette';

  /* Velada V Custom Colors */
  --color-theme-french-mauve: oklch(67.65% 0.1539 329.18);
  --color-theme-raisin-black: oklch(25.53% 0.0209 340.25);
  --color-theme-tickle-me-pink: oklch(75.65% 0.143 355.9);
  --color-theme-seashell: oklch(95.25% 0.0147 33.07);
  --color-theme-turquoise: oklch(82.97% 0.148864 181.7442);
}

@layer base {
  html,
  body {
    display: flex;
    flex-direction: column;
    margin: 0;
    width: 100%;
    min-height: 100%;
    /* Disable overscroll behavior */
    overscroll-behavior: none;
    overscroll-behavior-y: none;
  }

  html {
    scrollbar-gutter: stable;
    background: var(--color-theme-raisin-black);
  }

  body {
    background: #f19fca;
  }

  /* Webkit Browsers (Chrome, Safari, Edge) */
  ::-webkit-scrollbar {
    width: 10px;
  }

  ::-webkit-scrollbar-track {
    background: var(--color-theme-raisin-black);
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--color-theme-french-mauve);
    border-radius: 5px;
    border: 2px solid oklch(67.65% 0.1539 329.18 / 0.4);
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-theme-tickle-me-pink);
    /* Efecto hover */
  }

  /* Firefox */
  * {
    scrollbar-color: var(--color-theme-french-mauve) var(--color-theme-raisin-black);
    scrollbar-width: thin;
  }
}

@layer utilities {
  /* Efecto neón sutil solo para el texto */
  .neon-text {
    color: #fff;
    text-shadow:
      0 4px 18px rgba(0, 0, 0, 1),
      0 0 2px #00aba5,
      0 0 4px #ff4f9f;
    animation: neon-flicker 2.2s infinite both;
    transition: text-shadow 0.3s;
  }

  @keyframes neon-flicker {
    0%,
    100% {
      opacity: 1;
      text-shadow:
        0 2px 8px rgba(0, 0, 0, 1),
        0 0 2px #00aba5,
        0 0 4px #ff4f9f;
    }
    10% {
      opacity: 0.95;
      text-shadow:
        0 2px 8px rgba(0, 0, 0, 1),
        0 0 3px #00aba5,
        0 0 6px #ff4f9f;
    }
    18% {
      opacity: 0.85;
      text-shadow:
        0 2px 8px rgba(0, 0, 0, 1),
        0 0 1px #00aba5,
        0 0 2px #ff4f9f;
    }
    20% {
      opacity: 0.95;
      text-shadow:
        0 2px 8px rgba(0, 0, 0, 1),
        0 0 3px #00aba5,
        0 0 6px #ff4f9f;
    }
    25% {
      opacity: 0.9;
      text-shadow:
        0 2px 8px rgba(0, 0, 0, 1),
        0 0 1px #00aba5,
        0 0 2px #ff4f9f;
    }
    30% {
      opacity: 1;
      text-shadow:
        0 2px 8px rgba(0, 0, 0, 1),
        0 0 2px #00aba5,
        0 0 4px #ff4f9f;
    }
    70% {
      opacity: 0.97;
      text-shadow:
        0 2px 8px rgba(0, 0, 0, 1),
        0 0 2px #00aba5,
        0 0 4px #ff4f9f;
    }
    80% {
      opacity: 0.85;
      text-shadow:
        0 2px 8px rgba(0, 0, 0, 1),
        0 0 1px #00aba5,
        0 0 2px #ff4f9f;
    }
    90% {
      opacity: 1;
      text-shadow:
        0 2px 8px rgba(0, 0, 0, 1),
        0 0 2px #00aba5,
        0 0 4px #ff4f9f;
    }
  }

  .neon-text:hover {
    text-shadow:
      0 2px 8px rgba(0, 0, 0, 1),
      0 0 4px #00aba5,
      0 0 8px #ff4f9f;
    animation: none;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  .min-h-screen {
    min-height: 100svh;
  }

  .h-screen {
    height: 100svh;
  }

  @media (min-width: 768px) {
    .min-h-screen {
      min-height: 100vh;
    }

    .h-screen {
      height: 100vh;
    }
  }
}

@font-face {
  font-family: 'Adjusted Arial Fallback';
  src: local(Arial);
  size-adjust: 112%;
  ascent-override: 74%;
  descent-override: normal;
  line-gap-override: normal;
}

@font-face {
  font-family: 'Anisette';
  src: url('/fonts/anisette-medium.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Anisette';
  src: url('/fonts/anisette-bold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

html {
  font-family: 'Anisette', var(--font-fallback);
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@utility mask-fade-bottom {
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

@utility mask-fade-bottom-quick {
  mask-image: linear-gradient(to bottom, black 95%, transparent 100%);
}
